<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
    <base href="../dashboard/www/" />
    <link rel="stylesheet" type="text/css" href="style/reset.css">
    <link rel="stylesheet" type="text/css" href="style/default.css">
    <script type="text/javascript" src="javascript/jquery/jquery.js"></script>
    <script type="text/javascript" src="javascript/jquery/jquery.json.js"></script>
    <script type="text/javascript">  //<![CDATA[
      $(document).ready(function() {
        var values;

        var get_query = { key1 : "k1",
                          k2   : "k2",
                          k3   : "k3" };
        values = memcached({ get : get_query });
        $("div#test-2").append("<p>" + $.toJSON(values) + " <b>" + values[0].key1 + "</b></p>");
        
        var set_query = {};
        set_query[get_query.key1] = "foo1";
        set_query[get_query.k2]   = "foo2";
        set_query[get_query.k3]   = "foo3";
        values = memcached({ set : set_query });
        $("div#test-2").append("<p>" + $.toJSON(values) + "</p>");

        values = get_memcached(get_query);
        $("div#test-2").append("<p>" + $.toJSON(values) + " <b>" + values[0].key1 + "</b></p>");

        values = memcached({ set : { k1 : "set1", 
                                     k2 : "set2", 
                                     k3 : "set3"  },
                             get : get_query });
        $("div#test-2").append("<p>" + $.toJSON(values) + "</p>");

        values = get_memcached(get_query);
        $("div#test-2").append("<p>" + $.toJSON(values) + " <b>" + values[0].key1 + "</b></p>");

        var address_record = {
          street : "33 Riverside Drive",
          suburb : "Kommetjie",
          code   : "7975"
        };
        var record = {
          name    : "Antoine van Gelder",
          address : address_record,
          tags    : [ "address", "person" ],
        };
        record["some lame tag"] = "testing 123";
        $("div#misc").append("<p>" + $.toJSON(record) + "</p>");

        var set_funky_keys = {
          "k1"         : "k1 value",
          "spaced key" : "spaced key value",
          "funky.key"  : "funky.key value me"
        };
        var get_funky_keys = {
          k1   : "k1",
          key2 : "k2",
          k3   : "funky.key"
        };
        values = memcached( { set : set_funky_keys, get : get_funky_keys } );
        $("div#test-2").append("<p>" + $.toJSON(values) + "</p>");
        values = get_memcached(get_funky_keys);
        $("div#test-2").append("<p>" + $.toJSON(values) + "</p>");


        /** ------------- */
        function get_memcached(query) { return memcached({ get : query }); }
        function set_memcached(query) { return memcached({ set : query }); }
        function memcached(query) {
          var request = {};
          request.servers = "localhost";
          for (p in query) {
            request[p] = query[p];
          }
          $("div#log").append("<p>" + $.toJSON(request) + "</p>");
          var xml = $.ajax({
              url         : "http://localhost/cgi-bin/village-bus-memcached",
              type        : "POST",
              contentType : "application/json",
              dataType    : "json",
              async       : false,
              data        : $.toJSON(request),
              success     : function(data) {
                $("div#test-1").append("<p>" + $.toJSON(data) + "</p>");
                request.response = data; //data[data.length - 1];
              }
            });
          return request.response;
        }

        function args_to_array(args) {
          var ret = [];
          for (var i = 0; i < args.length; i++) {
            ret.push(args[i]);
          }
          return ret;
        }

      });
     //]]></script>
  </head>

  <body>
    <div id="container">
      <div id="log"    style="color:red;"  ><h2>Server Requests </h2></div><br/>
      <div id="test-1" style="color:green;"><h2>Server Responses</h2></div><br/>
      <div id="test-2" style="color:blue;" ><h2>Test Output     </h2></div><br/>

      <div id="misc"   style="color:black;"><h2>Misc Output     </h2></div><br/>
    </div>
    
  </body>
</html>
